<template>
  <div class="body">
    <div class="login">
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple-dark">登录/注册</div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <div class="grid-content">账号：</div>
        </el-col>
        <el-col :span="14">
          <div class="grid-content bg-purple-light" :span="13">
            <el-input v-model="input" placeholder="请输入账号"></el-input>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <div class="grid-content">密码：</div>
        </el-col>
        <el-col :span="14">
          <div class="grid-content bg-purple-light" :span="13">
            <el-input placeholder="请输入密码" v-model="inputPwd" show-password></el-input>
          </div>
        </el-col>
      </el-row>
      <div class="input1">
        <!-- <input type="button" value="登录" @click="login" class="input1" /> -->
        <el-button :plain="true" type="primary" round @click="login">登录</el-button>
        <el-button :plain="true" type="primary" round @click="register">注册</el-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "LoginView",
  data() {
    return {
      input: "",
      inputPwd: "",
      checkList: [],
    };
  },
  methods: {
    login() {
      if (this.input.length == 0) {
        this.$message({
          showClose: true,
          message: '账号不能为空!',
          type: 'warning'
        });
      }else if ( this.inputPwd.length < 6) {
        this.$message({
          showClose: true,
          message: '密码输入有误，请重新输入',
          type: 'error'
        });
        this.inputPwd = ''
      }else{
        this.axios
        .post("/api/login", { userName: this.input, userPwd: this.inputPwd })
        .then((res) => {
          if (res.data.message == "ok") {
            this.$message({
              showClose: true,
              message: '登录成功',
              type: 'success'
            });
            localStorage.setItem("token", res.data.user);
            localStorage.setItem("currentUser", JSON.stringify(res.data.data));
            this.$store.state.user = res.data.data;
            this.$router.push("/index");
          } else {
            this.$message({
              showClose: true,
              message: '登录失败',
              type: 'error'
            });
          }
        });
      }
      
    },
    register() {
      this.$router.push("/register");
    },
    change() {
      this.checked = true
    }
  },
  computed: {
    shuaxin() {
      return this.$store.state.user;
    },
  },
};
</script>
<style lang="scss">
* {
  margin: 0;
  padding: 0;
}

.input1 {
  margin-left: 50px;
}

.check {
  position: relative;
  top: 4px;
}

.check1 {
  position: relative;
  left: 7px;
  float: left;
}

a {
  text-decoration: none;
}

.login {
  width: 500px;
  margin: 10px auto;
  position: relative;
  top: 200px;
  border: 1px solid #000;
  border-radius: 5px;
  height: 290px;
  background-color: #e5e9f2;
}

.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
  height: 50px;
  font-size: 30px;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
  line-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.body {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url("http://pic.bizhi360.com/bbpic/88/8788.jpg") no-repeat center top;
}
</style>